<template>
  <div class="vue2-mindmap-container">
    <div class="controls">
      <button @click="addRootChild">添加根节点子节点</button>
      <button @click="toggleFullscreen">切换全屏</button>
      <button @click="changeDirection">切换方向</button>
      <button @click="rebuildMap">重建思维导图</button>
    </div>
    
    <mind-map 
      ref="mindMapRef" 
      :data="mindMapData"
      :direction="direction"
      :line-style="lineStyle"
      :line-color="lineColor"
      :line-width="lineWidth"
      :node-bg-color="nodeBgColor"
      :node-border-color="nodeBorderColor"
      :sibling-separation="siblingSpacing"
      :level-separation="levelSpacing"
      :drag-options="dragOptions"
      :zoom-options="zoomOptions"
      :full-screen-options="fullScreenOptions"
      @node-click="onNodeClick"
      @node-dblclick="onNodeDoubleClick">
      
      <!-- 自定义节点内容 -->
      <template v-slot="{ node }">
        <div class="custom-node">
          <strong>{{ node.content }}</strong>
          <p v-if="node.id !== 'root'" class="node-id">ID: {{ node.id }}</p>
        </div>
      </template>
    </mind-map>
  </div>
</template>

<script>
import { MindMap } from 'vue2-mind-map';

export default {
  name: 'Vue2MindMapExample',
  components: {
    MindMap
  },
  data() {
    return {
      direction: 'horizontal', // 'horizontal' 或 'vertical'
      lineStyle: 'curved',     // 'straight', 'curved', 'zigzag'
      lineColor: '#000000',
      lineWidth: 2,
      nodeBgColor: '#ffffff',
      nodeBorderColor: '#000000',
      siblingSpacing: 30,
      levelSpacing: 60,
      
      // 思维导图数据 - 树结构
      mindMapData: {
        id: 'root',
        content: '主题思维导图',
        children: [
          {
            id: 'branch1',
            content: '分支 1',
            collapsed: false,
            children: [
              { id: 'leaf1', content: '叶子节点 1' },
              { id: 'leaf2', content: '叶子节点 2' }
            ]
          },
          {
            id: 'branch2',
            content: '分支 2',
            children: [
              { 
                id: 'subbranch1', 
                content: '子分支 1',
                children: [
                  { id: 'leaf3', content: '叶子节点 3' }
                ]
              }
            ]
          },
          {
            id: 'branch3',
            content: '分支 3',
            children: []
          }
        ]
      },
      
      // 拖拽配置
      dragOptions: {
        enableNodeDrag: true,
        enableCanvasDrag: true,
        dragNodeButton: 0,        // 左键拖拽节点
        dragCanvasButton: [2, 1], // 右键和中键拖拽画布
        useThrottle: true,
        throttleWait: 16
      },
      
      // 缩放配置
      zoomOptions: {
        enableWheelZoom: true,
        zoomStep: 0.1,
        invertWheelDirection: false,
        minZoom: 0.3,
        maxZoom: 3.0,
        useThrottle: true,
        throttleWait: 16
      },
      
      // 全屏配置
      fullScreenOptions: {
        fullscreenBgColor: '#f5f5f5',
        fullscreenMode: 'native'  // 'native' 或 'pseudo'
      }
    }
  },
  
  mounted() {
    // 组件挂载后重建思维导图
    this.$nextTick(() => {
      this.$refs.mindMapRef.rebuild();
    });
  },
  
  methods: {
    // 添加根节点的子节点
    addRootChild() {
      const newChild = {
        id: `branch_${Date.now()}`,
        content: `新分支 ${this.mindMapData.children.length + 1}`,
        children: []
      };
      this.mindMapData.children.push(newChild);
      
      // 数据更新后重建
      this.$nextTick(() => {
        this.$refs.mindMapRef.rebuild();
      });
    },
    
    // 切换全屏
    toggleFullscreen() {
      // 这里可以调用组件的全屏方法
      // 具体实现取决于 vue2-mind-map 的 API
      console.log('切换全屏模式');
    },
    
    // 切换方向
    changeDirection() {
      this.direction = this.direction === 'horizontal' ? 'vertical' : 'horizontal';
    },
    
    // 重建思维导图
    rebuildMap() {
      this.$refs.mindMapRef.rebuild();
    },
    
    // 节点点击事件
    onNodeClick(node) {
      console.log('节点被点击:', node);
    },
    
    // 节点双击事件
    onNodeDoubleClick(node) {
      console.log('节点被双击:', node);
      // 可以在这里实现编辑节点内容的逻辑
    },
    
    // 导出数据
    exportData() {
      console.log('当前思维导图数据:', this.mindMapData);
      return this.mindMapData;
    },
    
    // 导入数据
    importData(data) {
      this.mindMapData = data;
      this.$nextTick(() => {
        this.$refs.mindMapRef.rebuild();
      });
    }
  }
}
</script>

<style scoped>
.vue2-mindmap-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.controls {
  padding: 10px;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ddd;
  display: flex;
  gap: 10px;
}

.controls button {
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.controls button:hover {
  background-color: #0056b3;
}

.mind-map {
  flex: 1;
  background-color: #fafafa;
}

.custom-node {
  padding: 8px 12px;
  background-color: #fff;
  border: 2px solid #007bff;
  border-radius: 6px;
  min-width: 80px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.custom-node strong {
  display: block;
  font-size: 14px;
  color: #333;
  margin-bottom: 2px;
}

.node-id {
  font-size: 10px;
  color: #666;
  margin: 0;
  font-style: italic;
}
</style>
